This page is going to focus on specific tools and techniques that allow you to add accessible features to your web site. I assume you are already using a web authoring tool to create your online site.
See the Accessibility Checklists & Tools page on this site
DOM = Document Object Model
SEO = Search Engine Optimization
Focus Control
Primarily thought of as being necessary when designing a page for keyboard users, but it's broader than that. Users must be able to move through the active elements on a page (buttons, links, form fields/controls, etc) in a logical order, and each active element must include a visual clue - or focus control - to indicate the active link. In a text field, the focus control is usually displayed as a blinking insertion point. For a button or link, the focus control is often a dotted box in a contrasting color around the link, but it might also be a change in color, a drop shadow, or other visual clue. The focus must have high contrast and be consistent throughout the page.
See Keyboard Access & Other Alternative Inputs page for additional information.
Use title attribute to include a title that is clear, concise, and relevant to the content. If the page is part of a series of steps, be sure to indicate that. (The title also appears on the tab in a browser.)
Use the language attribute to indicate the language of the site. Screen readers and Braillers need to know this or they may misrepresent the word(s) intended and say/display the word incorrectly.
Create file names that are meaningful to students. Use dashes between words rather than spaces or an underscore The underscore is apparently seen as a character, while a hyphen isn't.
Use logical reading order of objects on the screen, slide, or page.
5 Tips on How to Improve Accessibility When Creating Your Web Content in a WYSIWYG Editor https://cksource.com/blog/5-Tips-on-How-to-Improve-Accessibility-When-Creating-Your-Web-Content-in-a-WYSIWYG-Editor
The W3C describes Cascading Style Sheets (CSS) as a “simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.” CSS Zen Garden says, “CSS allows complete and total control over the style of a hypertext document.” Many individuals personalize the CSS used on their browsers to allow them to more easily view and interact with online material, regardless of how the web sties were designed to look. (From www.w3.org/Style/CSS/Overview.en.html and www.csszengarden.com/ )
CSS Tutorial [w3schools] http://www.w3schools.com/css/ This site has been around for a long time and does an excellent job.
CSS Zen Garden http://www.csszengarden.com/ This site is also wonderful. It lets you see the power of designing with CSS style sheets.
CSS Zen Garden Resource Guide http://www.mezzoblue.com/zengarden/resources/
CSS Beginner Tutorial [HTML Dog] http://www.htmldog.com/guides/css/beginner/
Cascading Style Sheets [W3C] https://www.w3.org/Style/CSS/Overview.en.html
Cascading Style Sheets [Web Design Group] http://www.htmlhelp.com/reference/css/
The CSS Saga [history of CSS] https://www.w3.org/Style/LieBos2e/history/
[Chapter 20 of the book Cascading Style Sheets, designing for the Web, by Håkon Wium Lie and Bert Bos (2nd edition, 1999, Addison Wesley, ISBN 0-201-59625-3)
CSS Color Names http://www.w3schools.com/cssref/css_colornames.asp
Free CSS http://www.free-css.com/ You can get free CSS templates, layouts and menus. They also have "premium' templates.
CSS3 templates css3templates.co.uk "Here you will find a selection of high-quality CSS3 website templates (pre-designed web pages) that are ready for you to insert your own content. ... These CSS3 website templates for websites are free to use ...
"A user agent is any software that retrieves and presents Web content for end users ... User agents include Web browsers, media players, and plug-ins that help in retrieving, rendering and interacting with Web content. ..." "Websites identify browsers by their user agents. Modify a browser’s user agent and it will appear as a different browser – or even a browser running on another device, such as a smartphone or tablet." "All popular browsers offer build-in user agent switchers, so you can change your user agent without installing any extensions...."
(from https://www.w3.org/WAI/UA/work/wiki/Definition_of_User_Agent and http://www.howtogeek.com/113439/how-to-change-your-browsers-user-agent-without-installing-any-extensions/)
Quick Links:
Definition of User Agent [W3C] https://www.w3.org/WAI/UA/work/wiki/Definition_of_User_Agent
How to Change Your Browser’s User Agent Without Installing Any Extensions http://www.howtogeek.com/113439/how-to-change-your-browsers-user-agent-without-installing-any-extensions/
User Agent {WIkipedia] https://en.wikipedia.org/wiki/User_agent
HTG[How-To Geek] Explains: What’s a Browser User Agent? http://www.howtogeek.com/114937/htg-explains-whats-a-browser-user-agent/
"Responsive web design ... responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a phone, users would see content shown in a single column view; a tablet might show the same content in two columns."
(from https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en)
On a computer screen, simply try changing the size of a window and see what happens. Can you still see and use the information when you re-size it? The main idea is that you don't leave out information to fit smaller devices, but rather you use HTML and Cascading Style Sheets (CSS) to allow the content to adapt (move, resize, hide, etc) when using different devices.
Quick Links:
HTML Responsive Web Design [w3schools] http://www.w3schools.com/html/html_responsive.asp
Responsive Web Design - Introduction [w3schools] http://www.w3schools.com/css/css_rwd_intro.asp
Responsive web design [Wikipedia] https://en.wikipedia.org/wiki/Responsive_web_design
Responsive Web Design: 50 Examples and Best Practices http://designmodo.com/responsive-design-examples/
5 sites that have nailed responsive web design http://www.creativebloq.com/rwd/sites-get-responsive-design-right-11410293 "Gene Crawford shares his rules for any responsive approach, and picks five sites that get it right.
Responsive web design basics https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
Responsive Web Design Examples https://responsivedesign.is/examples
16 really useful responsive web design tutorials" http://www.creativebloq.com/rwd/responsive-web-design-tutorials-71410085
When will responsive websites respond to user context? https://www.clickz.com/2016/06/23/when-will-responsive-websites-respond-to-user-context?
User Experience Stack Exchange http://ux.stackexchange.com A “question and answer site for user experience researchers and experts. It's 100% free, no registration required. “
Where, Oh Where, Should Content On A Screen Go? http://www.kdplatform.com/content-on-a-screen/
10 Principles Of Effective Web Design https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/
[Smashing Magazine] Category: Design https://www.smashingmagazine.com/category/design/ "...features articles on general design principles, Web design, typography, user interface design and related topics."
Test the HTML
SEO (Search Engine Optimization Site Checkup http://seositecheckup.com/ They have a number of free tools to check the code on your web page. You just type in the URL and it runs a report. They also have commercial tools.
h1 and h2 Tag Test http://seositecheckup.com/tools/h1-and-h2-tag-test Type in a URL to check the” content of any h1 & h2 tags within your web page.”
Broken Links Test http://seositecheckup.com/tools/broken-links-test Type in a URL to check your “website for broken or dead links. This tool scans your website to locate internal and external broken links…
Add sound to site
ReadSpeaker by WebReader http://webreader.readspeaker.com “Give your web site or blog a voice so that people can listen to what you have to say!” ReadSpeaker is the free version of a commercial product, WebReader, that you can use for personal websites and blogs. It does read a short ad at the beginning of each blog post.
New links that I find but have not yet looked at closely enough to add to my lists.
Images JPG photos, PNG graphics = aim for under 40K
How to Make Efficient Navigation Structure in Your Websitehttp://www.wikihow.com/Make-Efficient-Navigation-Structure-in-Your-Website
App makr (free version available) http://www.appmakr.com/ "Make your own mobile app!"
.