Writing HTML with accessibility in mind
An introduction to web accessibility. Tips on how to improve your markup and provide users with more and betters ways to navigate and interact with your site. If you don’t want to read the preface, jump right to the tips.
Personal development and change in perspective When I made my first website my highest priority was to get content online. I didn’t care much about usability, accessibility, performance, UX or browser compatibility. Why would I? …
Personal development and change in perspective
When I made my first website my highest priority was to get content online. I didn’t care much about usability, accessibility, performance, UX or browser compatibility. Why would I? I made a robust table based layout and I offered a 800×600 and a 1024×768 version of my site. On top of that, I informed users that the website was optimized for Internet Explorer 5.
This was of course before I started to work professionally as a web designer and my perspective in what was important changed.
Years later, instead of dictating the requirements for my websites, I started to optimize them for all major browsers.
Beginning with Ethan Marcotte’s game changing article I started caring about devices as well.
Making websites for all kinds or browsers and devices is great, but pretty much useless if the websites are too slow. So I learned everything about critical CSS, speed indices, font loading, CDNs and so on.
Getting started with accessibility (a11y)
But accessibility isn’t just yet another item on our to-do list to cross off before we launch our website. Accessibility is the foundation of what we do as web designers and web developers and it’s our obligation to treat it as such.
I spent the last few months reading, listening and talking about web accessibility. It took me some time to get my head around a few things and I’m still at the beginning, but the more I learn the more I’m surprised how much I can do right now without having to learn anything completely new.
In this series of articles, I want to share some of my newly acquired knowledge with you. You shouldn’t treat the tips I’m going to give you as a check list but as a starting point. Incorporating these techniques into your workflow will get you started with accessibility and hopefully motivate you to learn and care more about your users.
Without further ado, here are my accessibility tips:
Source: Writing HTML with accessibility in mind – Medium
We’re excited to announce that the U.S. Access Board has published its long-awaited update(link is external) to the federal regulations covering the accessibility of information and communications technology (Section 508) and telecommunications products and services (Section 255).
What are Section 508 and Section 255?
Section 508 of the Rehabilitation Act of 1973 applies to federal government agencies and the technology providers that sell to them.
Section 508 applies to a wide range of technology products, including computer hardware and software, websites, video/multimedia products, phone systems, and copiers.
Section 255 of the Communications Act applies to telecommunications equipment manufacturers and service providers. It requires that telecommunications equipment and services be accessible to, and usable by, individuals with disabilities.
Why did the Access Board update these rules?
The Access Board updated and reorganized the Section 508 standards and Section 255 guidelines in response to market trends and innovations. Section 508 was last updated in 2000, and technology has evolved significantly since then. For example, in some cases different technological systems are now capable of performing similar tasks.
PEAT and other technology and disability experts anticipate that the updated rules will generate significant benefits for individuals with disabilities, including:
Curated by (Lifekludger)
Read full article at Source: Writing HTML with accessibility in mind – A List Apart Sidebar – Medium
To screen readers, a lot of the visual information that is presented on a webpage is lost. Because of this, we need to specifically provide information to them that may be obvious to a person looking at the page.
One common way people define information specifically for screen readers is to wrap the descriptive text in an element with a particular class, such as .screen-reader-text, and hide the element using a method that keeps it visible to screen readers.
Although this does work, we can use ARIA attributes that are specifically for this purpose.
curated by (Lifekludger)
Read full article at Source: HTML For Screen Readers – Labelling Elements | bitsofcode
CSS is providing newer and more complex methods of laying out your pages. Given the multiple form factors a responsive site has to support, it makes sense that developers want easy ways to structure the layouts that aren’t all floats, clears and position: absolutes.
Regardless of how you want your layout to appear in a browser, you must keep in mind that a clear HTML structure is important to search engines. Sorry, while the bit about search engines is true, it’s not really what I consider important, but it is more likely to get some people to pay attention.
What I consider important are users of screen readers or any kind of assistive technology that allows a user to navigate a page by regions (typically by the Tab↹ key), as well as sighted keyboard users.
curated by (Lifekludger)
Read full article at Source: Source Order Matters | Adrian Roselli