Tag Archives: html

HTML For Screen Readers – Labelling Elements

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 attrib…

Curated by (Lifekludger)
Read full article at Source: HTML For Screen Readers – Labelling Elements

Semantic HTML: The Unbearable Rightness of Being

This is the fourth post in a series on accessibility from Shopify’s UX team. We’re publishing posts every two weeks. Check out the introduction.

Using valid, semantic HTML is one of the most impactful ways to make your site more accessible. Writing semantic HTML means using the HTML element with the most specific, correct meaning for your task. For example, if you’re building a button, use a <button> element. With CSS and JavaScript you could make just about any element, e.g. a <div>, look like a button, but it won’t be a button.

This being is the reason semantic HTML is important for accessibility. Browsers have different behaviour depending on what an element is, not what it looks like. These differences can have a big impact on user experience.

How semantic HTML affects users

Consider this example (also available as a CodePen):

<div class="btn" onclick="alert('something')">do something</div>
<a href="#" class="btn" onclick="alert('something')">do something</a>
<button type="button" class="btn" onclick="alert('something')">do something</button>

 

 

Curated by (Lifekludger) Read full article at Source

The a11y Monthly: get rid of your tables (or fix them) 

While the original intended use of HTML tables was tabular data, tables are also used as aids for page layout. This was especially true some years ago when browsers hardly supported CSS. Tables were necessary to overcome limitations in visual presentation. Today, there is much more flexibility in controlling page layout using CSS. Does it still make sense to use layout tables? From an accessibility perspective, are layout tables good or bad? Any myths and misconceptions to debunk? At Yoast, we’ve decided to get rid of the few layout tables still used in our plugins.

We’re working hard on making the web and our products as accessible as possible for everyone. We believe every single individual on this planet has a right to accessible web content and we have to lead by example. Since so much of our work goes on behind the scenes, we’re publishing this monthly series of blog posts to keep you posted on this important part of our work.

Curated by (Lifekludger)
Read full article at Source: The a11y Monthly: get rid of your tables (or fix them) • Yoast Dev Blog

Writing HTML with accessibility in mind

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? …

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? 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

Writing HTML with accessibility in mind – A List Apart

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

HTML For Screen Readers – Labelling Elements

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

Source Order Matters | Adrian Roselli

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