Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Tools for developers

If only there was a guide on how to improving the code so that we include more people... Wait, there is!

Do's and don'ts

Do's and don'ts

Follow these simple examples to improve your products accessibility.

1. Doctype & lang

Use doctype and lang attribute. If the doctype is not specified, the browser will have a problem to properly parse the page. And if there is no lang attribute, search engines and screen readers will have a problem to interpret the content

<!DOCTYPE html>
<html lang="en">

2. Alt attribute

Always use the alt attribute. It is key for SEO, but more importantly, it makes a big difference for users with visual disabilities.

If the image is used for design or is not relevent for the content, use an empty alt attribute rather than none at all.

<img alt="Cute cat" src="/catimage.jpg">
<img alt="" src="/design-element.jpg">
Don't
<img src="/catimage.jpg">

3. Labels

Use labels correctly. Labels play an important role for how a user can interact with a form.

<label for="usernameinput">Username</label>
<input type="text" id="usernameinput" name="username">
Don't
<label>Username: <input type="text" id="usernameinput" name="username"></label>
<div>Username: <input type="text" name="username"></div>

4. Buttons

Use button elements when implementing interactive actions. Using a link that doesn't go anywhere is bad practice and confusing. Use a regular button instead!

<button class="closemodal" aria-label="Close the modal">X</button>
Don't
<a href="#" onclick="...">X</a>

5. Title

Use title attribute on icon button/links. If a button only contains a icon (such as on a share link or a close button) we need to indicate what the button actually does.

<button class="share-facebook" aria-label="Share this page on facebook">(Facebook icon)</button>

6. Active state

Do preserve active state. Make sure selectable elements have a indication for when a user has navigated to a link/button using the keyboard

button:hover, button:focus,button:active{ border:2px solid #666;}

7. Keep outline

Don't remove outline. If you have not made a specific visual indication you should not remove outline

Don't
a { outline: 0; }
Test your markup!

This is how you ensure your markup is valid

Paste your markup into the W3C Validator (https://validator.w3.org/#validate_by_input) and make sure it is valid.

Invalid markup is extra problematic for screen reader software.

Run an audit in Chrome

This test also works on locally hosted websites (event localhost).

  1. Navigate to the website you want to test in Chrome
  2. Open up Developer Tools (Ctrl + Shift + I or F12)
  3. Open the Audit tab
  4. Click on the "Perform an audit..." button
  5. Select only "Accessibility"
  6. Click the Run audit button

Check each item that did not pass. Most issues have a read more link that will take to you a in depth description of the problem and how to progress with the issue.

More tools

Section 508 Checklist: https://www.hhs.gov/web/section-508/making-files-accessible/checklist/html/index.html

W3C Accessbility Evaluation Tools List: https://www.w3.org/WAI/ER/tools/

Subsections

Page last updated

Feedback

Was this page helpful?