Download presentation
Presentation is loading. Please wait.
1
Principles of Accessible Web Design
2
Hello! Julie Brinkhoff Great Plains ADA Center
3
What is a Web Page? A web page is mark up language (HTML) that tells the browser how and where to display the different elements of the page. The browser “reads” the code and then provides a visual expression of that code.
4
What the Browser ”Reads”
<body> <div id="topbox"><br><br><h1>ADA Now<span class="style15"> An online quarterly providing information and resources on the Americans with Disabilities Act.</span></h1></div><div id="heading"> <div class="topnav"><a href=" Training</a> <a href=" <a href=" <a href=" </div></div> <div class="columnone"><img src="Winter2017Cover.jpg" width="3865" height="2074" alt=""/> <span class="style20"> Winter 2018 Issue:</span><br><div class="left"> <h2>Service Animals </h2></div><div class="right"><a class="end" href=" to articles.</a> </div></div> </body>
5
Web Pages are Made Up of Several Features
6
How Do We Design Web Pages with Accessible Features?
Understand how people with disabilities access web pages-technology they use. Identify common barriers to accessible web pages. Follow Web Content Accessibility Guidelines
7
Web Content Accessibility Guidelines (WCAG 2.0)
Level A Must be followed to provide basic accessibility. Level AA Provides access to larger group of people with disabilities. Level AAA Highest level of access to largest group of users. Meeting all of Level AAA is not expected.
8
Web Content Accessibility Guidelines (WCAG 2.0)
Levels help ensure websites provide the access that people with disabilities MUST have to use the website. Each level builds on the previous. Some features are helpful, make using the internet much easier for people with disabilities. Other features are necessary and without them users with disabilities would have no access to internet content!
9
WCAG is Based on Four Principles of Accessible WeB Design
10
POUR Content must be perceivable.
Interface elements in the content must be operable. Content and controls must be understandable. Content must be robust enough to work with current and future technologies.
11
Most people will ”perceive” this page visually.
Blind users will perceive the page by hearing screen reading software read the content to them. This only works if the site is coded in a way that screen reading software can “read”!
12
Common Barriers to Screen Reading Software
Images don’t have “alt tags” that the screen reader can read. Impossible to easily navigate through the page and find content. Page cannot be “read” in a logical order.
13
ADA National Network Logo
The logo conveys information and should have an alt tag that provides the text in the image.
14
Alternate Description for Images
An image may not contain text but still help convey information.
15
Which Description? “This child is pulling on her ear, a common behavior when children have earaches.” “A child with blue eyes and a blue shirt pulling on her ear.”
16
Flowers in a Field This image is purely for decoration and conveys no content. In order to let the screen reader move past the image, it should be given a null “ “ alt tag.
17
Lengthy or Complex Images
This image has information that lengthy and complicated. What are other options?
18
Navigation/Finding Content
19
Structural Mark-Up Structural mark-up allows screen reading software to present an outline of information to the user. Also connects relevant information and lets the user know when new topic is introduced. Heading 1 Heading 2 Heading 3 Heading 4
20
All About Fonts Generally Perceivable Can be Difficult to Perceive
Sans Serif Fonts 14-16 pixels Enough space between lines—known as line height. Limited text in ALL CAPS. Stand out words in bold or italic. Serif or decorative fonts. Very small fonts Very little space between text lines. Very little space between text lines. Very little space between text lines. PARAGRAPHS IN ALL CAPS Paragraphs in bold or italics.
21
Text and Background Contrast
Content should be adequate contrast. Either light on dark background or dark on light background. Content should be adequate contrast. Either light on dark background or dark on light background. Content should be adequate contrast. Either light on dark background or dark on light background.
22
Color That Conveys Content
Click the red button to submit. Click the red button to submit. Submit Restart Click the red button marked submit.
23
Color That Conveys Content
In the middle of this text is a link to another website. In the middle of this text is a link to another website. In the middle of this text is a link to another website. In the middle of this text is a link to another website. The red link becomes almost invisible for someone who is color blind
24
Don’t be afraid of color
Don’t be afraid of color. It augments content and helps navigate the website more easily. Most people benefit from the wise use of color. However, make sure information is not dependent only on color! About Color
25
Perceivable-Audio Videos need to be captioned
for the deaf and hard of hearing.
26
Accessible Multi-Media
Captions must be accurate. (Over 95%) Text must be synched with video. OK to use YouTube auto-captioning program to create transcript—but MUST check and correct for errors.
27
Operable Along with perceiving content users have to able to interact with the website. Example: Moving through the site using navigation and links. Entering information into forms and submitting.
28
How do we make sites operable?
Operable with a keyboard or device other than a mouse. Give users enough time to read and use content Do not use content that causes seizures Help users navigate and find content
29
Operable by Keyboard Website code should allow alternatives to a mouse controlled by hands.
30
Security Captcha A person who is blind or low vision will not be able to recognize a Captcha security log-in. Someone with poor motor control may not use a mouse and need to be able to use a keyboard to navigate.
31
Forms Forms pose several challenges for screen reader users and for users with limited mobility.
32
Understandable Content should be understandable—clear, simple language. Supplementing text with illustrations, video, etc. can be helpful. Users must be able to understand the functionality of a website. Navigate to other pages Easily use features such as ”shopping”
33
How do we do this? Make text readable and understandable.
Make content appear and operate in predictable ways. Help users avoid and correct mistakes.
34
Create a Clear Visual Hierarchy
Organize and prioritize the contents of a page by suing size, prominence and content relationships. Let’s look at these relationships more closely. The more important a headline is, the larger its font size should be. Big bold headlines help to grab the user’s attention as they scan the Web page. The more important the headline or content, the higher up the page it should be placed. The most important or popular content should always be positioned prominently near the top of the page, so users can view it without having to scroll too far. Group similar content in a similar visual style, or in a clearly defined area. Organize and prioritize the contents of a page by using size, prominence and content relationships. Let’s look at these relationships more closely: Size. The more important a headline is, the larger its font size should be. Big bold headlines help to grab the user’s attention as they scan the Web page. Prominence. The more important the headline or content, the higher up the page it should be placed. The most important or popular content should always be positioned prominently near the top of the page, so users can view it without having to scroll too far. Content Relationships. Group similar content in a similar visual style, or in a clearly defined area.
35
Consistent Elements
36
Help Users Avoid and Correct Mistakes
Error Messages are Helpful Give the Option to Re-enter, Save or Resubmit Information. Give users information such as “only click once” to avoid mistakes Avoid the “endless loop cycles” where users can’t request passwords or are cycled back to where they started.
37
Avoid Crowded Design
38
Robust Web pages should be accessible to different browsers and work with different assistive technologies. Should also be accessible by different technologies: Smart-Phone, computer, tablet.
39
Coding is Important!! It may look great on the exterior! But the coding may not look so good and make it difficult for assistive technologies and software to be used.
40
WCAG v2: Final Thoughts The Web Content Accessibility Guidelines are based on these principles. Guidelines are divided into sections by these principals.
41
WCAG v2: Final Thoughts Use to evaluate as you design—Don’t wait till you have a finished product. Use to assess current accessibility and develop a plan. Build in maintenance checks. A webpage is not like a building, it changes as features are updated/changed.
42
WCAG v2: Final Thoughts Remember, we code and design to create an outcome. Accessible websites that are also user friendly for all users.
43
Thank You
Similar presentations
