Accessibility for Web Design 6

1/23/19

Author: Derek Featherstone

  • Make sure your content is written in a way that helps people make decisions quickly.
  • Ask yourself, if someone just reads the heading in my page, will they get a good understanding of what’s on the page?
  • Put the important things first, so that it can be consumed quickly.
  • It’s important that each page in a site have a unique title.
  • The page title and the h1 should work together to say, “Here’s the main topic of this page.” These are small details, but they are very useful for people with disabilities, and specifically visual impairments.
  • The most significantly different tool that people use is a screen reader.
  • We usually read websites from top to bottom if we have a reason to do so.
  • People with disabilities generally do the same thing.

 

Screen Shot 2019-01-23 at 7.13.59 AM.png

  1. I already knew that there are different tools to help someone look through the websites. I already knew that you have to catch your viewers attention. I already knew about one of the tools used for people with disabilities, the screen reader.
  2. I learned that we have to put the important things first in our website to pull the viewers in. I learned that your website has to make sense and understandable for the viewer. I learned that each website page has to have a unique name and also show details on what the website is about.
  3. I want to learn about the other tools that help people with disabilities and how to put them in my website.

Accessibility for Web Design 5

1/18/19

Author: Derek Featherstone

  •  Forms are designed for input.
  • It would be highly beneficial for keyboards to be context sensitive too.
  •  When we use forms, we need to make sure that the input for those forms has both the correct format and expected values.
  • And when they don’t, we need to show some kind of error messaging to help people fix the issues.
  • Establishing a consistent placement and pattern for the error messages is a good thing. 
  • You might always show the error message above the form field and always include the same error icon.
  • Third, the error message content should be as simple as possible. No jargon, and written in plain language so that it’s easy to understand for everyone.
  • This helps people with literacy-related issues, people that are deaf or hard of hearing, and anyone that doesn’t natively speak the same language as your website’s interface.
  • Designing with flexibility in mind, generally makes things better from an accessibility perspective.
  • Fixed layouts don’t often respond well to text resizing, and many people need that text resizing, whether they’ve got a low vision, or are simply getting older and need to bump up the font size on their screen.
  •  Flexible layouts adapt better to different size screens than fixed widths do.
  • Flexible layouts respond better to things like font size changes in the browser, or at the operating system level.
  • One of the biggest ideals for designing and building for accessibility is to take people’s needs into account, no matter how they’re viewing or working with what we’ve created.
  • Design parts of our pages to be flexible, we take into account text resizing, user settings and preferences.
  • The most important accessibility benefit to responsive design is that conscious, intentional reflowing of content to fit appropriately in different viewport sizes.
  • When you know the viewport size, don’t assume a small viewport is a touch screen. Don’t assume a large viewport isn’t a touch screen. Don’t assume they will or won’t be using a keyboard. Don’t assume you know anything other than viewport size.

Screen Shot 2019-01-18 at 7.14.11 AM.png

  1. I already knew that forms are designed for input. I already knew that when something goes wrong in a form, you have to have some sort of message. I already knew that never change an error message.
  2. I learned to design with flexibility in mind, generally makes things better from an accessibility perspective. I learned that establishing a consistent placement and pattern for the error messages is a good thing, it won’t make it confusing for people with disabilities. I learned that we need to take into account text resizing, user settings and preferences to make it easier for people with disabilities.
  3. I want to learn how to code in a text resizing for my website.

Accessibility for Web design 4

1/16/19

Author: Derek Featherstone

  • People that are deaf or hard of hearing need transcripts.
  • If you want to level up a little, make the transcript easily downloadable in a nice, easy to read format.
  • Nul alt attribute will tell assistive technology that it doesn’t need to read anything out when it encounters that image.
  • If the image or media is informational, the text equivalent needs to represent its content and if it’s functional, the text equivalent should provide a clear indication of its function.
  • Sometimes a visual is part decorative, part informational and part functional all wrapped up in one.
  • Audio description is often used with television shows and movies so people can understand what’s happening on the screen without being able to see it.
  • Labeling form fields are one of the simplest things you can do to ensure that forms are more accessible.
  • Form labels help almost everyone. They create a programmatic relationship between the onscreen text and the form control itself so that the forms can be understood and used by people that can’t see the screen.
  • When placed correctly on the page they help people with low vision better understand which piece of information goes where in the form.
  • They help people with mobility and dexterity impairments because forms create bigger targets for clicking.
  • Every form field needs a label.

Screen Shot 2019-01-16 at 7.17.58 AM.png

 

  1. I know that people that are deaf need a transcript to make it easier for them. I know that you have to label everything on your website. Making buttons bigger helps people with disabilities.
  2. I learned that you can put something called “assistive technology” that can read the website to a blind person. I learned that a visual can be part decorative, part informational and part functional all wrapped up in one. I learned that if an image or media is informational, the text equivalent needs to represent its content and if it’s functional, the text equivalent should provide a clear indication of its function.
  3. I would like to learn what a gotcha is and why it is bad to use/see.

Accessibility for Web Design 3

1/14/19

Author: Derek Featherstone

  1. 1.5 billion smartphones were sold worldwide last year, and all of them include touchscreens and built-in accessibility software.
  2. We have to remember to design things that take into go with everybody.
  3. When you design touch interfaces, consider that some people may never physically touch the screen.
  4. We can make things much easier by increasing the size of the targets and spacing them out.
  5. The larger target size will also benefit people with dexterity issues that use a mouse or a switch device.
  6. Gestures are powerful ways of directly manipulating touch screen interfaces, and they open new methods for people with disabilities to use touch screens.
  7.  With gestures, they have the ability to swipe through an interface to move a cursor around the screen. Very similar to the way they can use a keyboard to move the cursor on a desktop computer.
  8. This is an effective technique because they can’t see the screen. they manipulate the cursor with swipes and flicks up, down, left, right and many others.
  9. People with disabilities need details from the video, they need clear instructions, and they need to be able to easily repeat clips.Screen Shot 2019-01-14 at 7.31.40 AM.png1. I knew that we need to make our website accessible on phones and other touchscreen devices. I knew that we have to make our websites accessible for people with missing limbs. Everything has to be spaced out evenly.

2. I learned that with radio buttons and checkboxes need to be evenly spaced out, they also need to be reasonably big buttons. I learned that gestures are powerful ways of directly manipulating touch screen interfaces. I learned that, with gestures, they have the ability to swipe through an interface to move a cursor around the screen.

3. I want to learn more about the different types of gestures are there.

Accessibility For Web Design 2

1/10/19

Author from the video: Derek Featherstone

  • People with straw vision can have a hard time viewing the website. Having little notifications on buttons. For example, the person added something to their cart while shopping online and the added to cart notification is all the way to the top. Adding an “added to cart notification” right next to the add cart button makes it easier for people with straw vision to know that it was added and not going all the way to the top.
  • Don’t rely on the default focus indicator.
  • Plan your focus states
  • Reuse hover state for focus
  • Use text-decoration: underline
  • Use background-color and text-color changes
  • Must Complete tasks with Keyboard

Screen Shot 2019-01-10 at 7.26.55 AM.png

  1. I knew that people had disabilities that can make it difficult for them to use a computer. I knew that for our websites, we need to make it accessible for everyone. I knew that there are some keyboard functions that can help people with disabilities.
  2. I learned that people have “straw vision” and it makes it very difficult for them to browse your website. I learned that some people can’t see their mouse so hover focus can help them with that. I learned that even though web browsers have a default hover focus, that we should make our own.
  3. I would like to learn more about the keyboard functions and how they can help.

Accessibility For Web Design

1/8/19

Author of the video:  Derek FeatherstoneScreen Shot 2019-01-08 at 7.45.32 AM.png

  • You have to make your website accessible for everyone. Labeling can make it easier for people to use. Make your website visibly appealing.
  • There are many ways to make your website colorful and easy to use for everyone. If you are labeling something using color, make sure to add something else to make sure people with disabilities can see it too. You have to be careful when you choose your color palette. Some colors may not work well together and can ward off viewers. Say you use an ugly brown and purple, viewers won’t want to look at your website because of the ugly color choices. When you have animations on your website, have an option to turn it off. People can get sick, have a headache or get nauseous when they see the animation. Make sure you use the animation responsible.
  • I would like to learn how to make the websites more modern and visually appealing. I want to learn how to add animations to my future websites.

HTML and CSS Reflection

 

Screen Shot 2018-11-01 at 7.31.25 AM.png

I had no experience in HTML and CSS before I joined Web design. This is my first experience working with HTML and CSS. It was quite fun and also challenging. I’m looking forward to making and improving my website.

I learn the many ways of designing and moving a website. I don’t look at websites the same now. I learned how to put images to the side and I learned how to add a video on a website. I learned how to change the background and how to change the font.

I wish I spent more time on the background. Because I was rushing, the background failed and I had no time to fix it. I also wish I could have made the website more enjoyable to look at. My website was plain and boring. I wish I had spent more time on the CSS.

Screen Shot 2018-11-01 at 7.36.03 AM

I had a hard time making the different pages link together. The links would not work and sometimes didn’t let you return to the home page. I kept looking at what I was doing wrong. I then realized I was using the wrong HTML code. After that, the problem was fixed.

Screen Shot 2018-11-01 at 7.42.40 AM.png

The most enjoyable part of this project was creating the website itself. I liked putting the website together. Even there is a lot of codes to remember, it was fun to create the website. I liked looking for a video to put on my website. I liked designing the background (even though it didn’t show).

The least enjoyable part of this project was when the background failed. I worked very hard to get the background to work but it still failed. I felt uncomfortable showing my website to people with a plain background. It made it seem I wasn’t trying.

I first started with just writing down the paragraphs and titles. I then went to CSS and started to center and change the fonts for my website. I started to change the size of my fonts and also did a quick spell check. Next, I started to put my images in. And then I worked on my form. After that, I was working on the background of my website.

Maybe could have given us more time. I still had assignments to work on when the project started. Maybe I just need to work faster but if I had more time I could have made my website more presentable.

About Me

I have always loved nature and my long-term goal is to be able to live in a nice cozy home in the woods (I know, it sounds crazy). I am a beginner in web design. I would like to know more and hopfully be able to create web sites for businesses.

I love to hear jokes, no matter how bad it sounds, I will still giggle. I absolutely love to read. I read any chance that I can get. I’ll read online or a book in my hands. I love the mystery and horror genre.

I have a rottwieler name Thor (no I didn’t name him). He is a big goofball and I love him for that. He also thinks he can sit on your lap, but he can’t, he is a big pupper.