- Understanding accessibility
- Determining how you will make your own work accessible
- Providing consistent navigation
Reading & Watching
Web Site Accessibility – Easy Checks: https://www.w3.org/WAI/eval/preliminary.html
- Skim the full page (especially the introduction) for meeting Web Content Accessibility Guidelines 2.0 requirements
- Skim the whole page and read/expand the areas on:
HTML and CSS Book Ch 13: Boxes
How far are we through the course?
When this week is completed you will be this far through the course.
220/500 points possible
Week 8: Accessibility & Navigation
- From the W3C, “Web accessibility evaluation tools are software programs or online services that help you determine if web content meets accessibility guidelines.” The Web Accessibility Initiative page suggests, “Web accessibility evaluation tools can be used throughout all stages of Web site development. For example at the early design stage, Web designers may be interested in using tools that help them understand how the site structure, navigation, or look-and-feel perform with respect to accessibility requirements.”
You need to know that it is important to design and code your web pages so that everyone can access them. What does that mean?
- Using a few simple rules during the design phase to ensure people with different abilities than you can readily interact with your web pages. Such as https://www.w3.org/WAI/eval/preliminary.html
- Testing: this tool list can help you; at a minimum you need to: use the alt tag for every image; use h1, h2, h3 sizes in order; use !doctype html
- Viewing: check your final page to determine if the order in which you are presenting your content makes sense.
At a minimum… and that is a phrase that I am reluctant to use, you must include alt tags to all images. What else? Try to follow the four principles of accessibility quoted below.
A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques.
Basically, pay careful attention to your use of color: it should not be used ALONE to convey meaning. I.e. red for caution, etc. If you use color, also used text. if you use video or animations in your work that have captions–text on them–you need text-transcripts to also be present. If you use tables, make sure you have headings for the rows and the columns. Most tables have column headings. See my schedule. I must update it. If you have documents in your website you should follow the styles in the program you used to create them; i.e. headings are consistent, etc. If you use PDFs make sure that they are not just a scanned image. Your PDFs should be able to be searched and text should be able to be selected.
“Understanding the Four Principles of Accessibility
The guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is:
- Perceivable – Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses.)
- Operable – User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform.)
- Understandable – Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding.)
- Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible.)
If any of these are not true, users with disabilities will not be able to use the Web.
Under each of the principles are guidelines and Success Criteria that help to address these principles for people with disabilities. There are many general usability guidelines that make content more usable by all people, including those with disabilities. However, in WCAG 2.0, we only include those guidelines that address problems particular to people with disabilities. This includes issues that block access or interfere with access to the Web more severely for people with disabilities” from https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html
Clear, consistent navigation across your site is a must. You may choose to add flair to your menu (fly out, buttons, etcetera) but it must make sense and be easy to read. Cute names do not help your viewer know where to go to find what they are looking for.
Consistent navigation: provide the same menu, or series of links, on every page in the same location.
Utilize proper headings: h1 comes before h2 … if you have a long page consider using a table of contents with named anchors so people may jump to different parts of the page.
Navigation: create a new page, navigation.html, with relative links to at least two other html files. You have already made three other HTML files. You may reuse them, or create new ones.
- Add your navigation to all three pages. Add more pages if you wish.
- Make sure that every image you use has the alt attribute set.
- Make sure that your heading sizes are appropriate to what you’ve read about regarding accessibility. Think about the fact that screen readers use heading sizes to help with navigating through a page.
- Provide a working link to the main page you made for this assignment. I should be able to see the other pages that you list in the navigation by following your navigation links.
ACCESSIBILITY WEBSITES & TOOLS
Best resource on web accessibility: https://webaim.org/intro/ WebAIM. Please review (skim the full intro and principles of accessible design). While you might not consider yourself designers, this page contains brief statements and a great infographic that should help you understand some of the key issues with designing for accessibility.
Read the Tips on Developing for Web Accessibility by W3.org. It is not that long. Really, it isn’t.
What is Section 508 of the Rehabilitation Act? Please read the full write-up starting with the heading, “Influence of Section 508.”
List of tools
- There is a full list of Web Accessibility Evaluation tools at: https://www.w3.org/WAI/ER/tools/
- Wave is a Web Accessibility Evaluation tool
- Colorblind safe color choices, see the left selection box choices. Yes, it is for cartography, but you can use it for color choices too.
- Both Chrome and Firefox have accessibility add-on extensions
- Tenon.io – this is a paid for service, but they have a free analysis tool. Watch out, it’s addictive and verbose.
CREATE & UPLOAD HTML #06: “Navigation” – 15 points
This assignment is optional. You can do it or not do it. In the past few semesters, this ranked as the least important (in students’ opinions) assignment.
Feel free to skip it or turn it in. If you’ve missed an assignment you might want to turn it in. IF YOU CHOOSE to do it, please turn it in on time. Don’t consider this assignment a ‘get out of free card’ for a future assignment worth 15 points… especially if it stacks with others (IE one assignment works closely with the next.)
Navigation: create a new page, navigation.html or nav.html, with relative links to at least two other HTML files. You have already made three other HTML files. You may reuse them—provided you ALTER THEM—or create new ones.
Add your navigation to all three pages. Add more pages if you wish.
Make sure that every image you use has the alt attribute set.
Make sure that your heading sizes are appropriate to what you’ve read about regarding accessibility. Think about the fact that screen readers use heading sizes to help with navigating through a page.
Provide a working link to the main page you made for this assignment. I should be able to see the other pages that you list in the navigation by following your navigation links.
PARTICIPATE IN DISCUSSION: Testing Accessibility – 15 points
Choose one of the following three pages to review and use at least one of the tools listed PLUS another tool you find (provide the link to the tool). Include: (a) a short list of the top results you found regarding the accessibility of the page; (b) how YOU think it could be fixed–this needs to be two to three short sentences; (c) why accessibility matters; (d) a brief write up of the tool/resource you found including a clickable link to that tool. Need to see the list of resources and tools from our course website?
- A page from our WordPress class site: https://cits222.community.uaf.edu/submitting-assignments/
- The code samples page of our course text: https://htmlandcssbook.com/code-samples/
- The Information Technology Specialist (ITS) certificate and associate programs page: https://ctc.uaf.edu/programs/its/index.html
*The assignment is 15 points.