Улучшение ваших навыков доступа в Интернет.
Одна из моих целей в этом году — писать более качественные коды, и одна область, которую я решил улучшить, — это стремление сделать мои приложения более доступными, чем когда-либо.
Я нашел время, чтобы прочитать пару ресурсов и буду писать на основе уроков, которые я извлек. Мои пункты будут простыми, потому что я хотел бы, чтобы моя статья помогла людям начать работу со специальными возможностями как можно быстрее.
Что такое веб-доступность?
По данным W3C WAI
Веб-доступность означает, что веб-сайты, инструменты и технологии проектируются и разрабатываются таким образом, чтобы ими могли пользоваться люди с ограниченными возможностями. В частности, люди могут:
- воспринимать, понимать, ориентироваться в Интернете и взаимодействовать с ним,
- вносить вклад в развитие Интернета.
Общие термины доступности
W3C — консорциум World Wide Web — это международное сообщество, разрабатывающее рекомендации о том, как должны работать в Интернете HTML, XML, CSS и т. д.
WAI —Инициатива по обеспечению доступности Интернета — это попытка W3C разработать стандарты и вспомогательные материалы для улучшения доступности Всемирной паутины (WWW).
WCAG –Руководство по обеспечению доступности веб-контента — это набор руководств и стандартов для улучшения доступности веб-сайтов. У нас есть старая версия WCAG 1.0 и текущие рекомендации WCAG 2.0
ARIA – Интернет-приложения с широкими возможностями доступности – это набор ролей и атрибутов, которые определяют способы сделать веб-контент и веб-приложения более доступными для людей с ограниченными возможностями.
Программы чтения с экрана. Программа чтения с экрана – это вспомогательная технология, которая работает с операционной системой компьютера (ОС) и обеспечивает преобразование текста, кнопок, изображений, значков и других элементов экрана в речь. Примеры: JAWS, NVDA, Apple предлагает VoiceOver, а Android — TalkBack.
ALLY — краткая форма написания специальных возможностей.
Практика доступностиСоветы
– Всегда используйте семантические элементы HTML
Элементы семантики HTML доступны и не нуждаются в атрибутах доступности для объяснения их функций и содержания. За исключением <div> и <span>, которые семантически бессмысленны и в основном используются для целей макета, все остальные элементы должны следовать семантической структуре HTML.
- Семантические элементы HTML должны сообщать о функциональном назначении контента
Всегда используйте элементы HTML по назначению. Не используйте HTML-теги <p>, <div> или <span> в качестве кликабельного элемента, если можно использовать семантический HTML-тег <button>. Не оформляйте абзац <p>tag так, чтобы он выглядел как заголовок <h1>tag.
– Используйте один тег H1 на странице
На каждой странице должен быть только один тег <h1>. Тег <h1> также служит заголовком для обозначения новой страницы, если на странице много тегов <h1>, что сбивает пользователя с толку.
– Не пропускать уровни заголовков при увеличении
Но можно пропускать уровни при уменьшении (h1, h2, h3, h2, h3, h4, h2, h3, h4). Правильное использование уровней заголовков (от H1 до H6) облегчает пользователям программ чтения с экрана пропуск различных разделов страницы.
Bad <section> <h1> First heading tag </h1> <div> <h3> Second Paragraph</h3> </div> </section> Good <section> <h1> First heading tag </h1> <div> <h2> Second Heading</h2> <h3> Third Heading </h3> </div <h2> Second Heading </h2> </section>
– Обязателен атрибут изображения alt.
Всегда включайте атрибут alt в тег изображения. Программы чтения с экрана используют текст Alt для описания изображений своим пользователям. Также,
- Замещающий текст должен точно описывать отображаемое изображение.
Good <img src="images/oscsa-logo" alt="Open innovation logo"/> Bad <img src="images/oscsa-logo" alt="logo"/>
- Всем изображениям нужен атрибут alt, но не всем изображениям нужен замещающий текст. Пример:декоративные изображенияне нуждаются в замещающем тексте, атрибут alt должен быть пустой строкой. Информативные и активные изображения должны иметь замещающий текст.
Decorative Images(mostly used for aesthetics) <img src="/images/ring1.png" alt="" /> Informative Images <img src="images/oscsa-logo" alt="Open innovation logo"/> Active Images(like buttons) <img src="images/close-icon" alt="close form modal"/>
- Не включайте текст "изображение" в описание замещающего текста, средство чтения с экрана уже считывает его как изображение, поэтому нет необходимости включать его в текст.
Wrong <img src="images/oscsa-logo" alt="Open innovation logo image"/>
– Используйте только атрибут aria или средство чтения с экрана (sr-only)текст
Атрибуты Aria полезны для добавления контекста к HTML-элементу только для пользователей программ чтения с экрана. Существует множество атрибутов aria для обеспечения доступности, но важно понимать, как и когда их использовать. В большинстве случаев используется aria-label , aria-hidden или sr-only (CSS-подход). Подробнее о разнице между aria-label и sr-only можно узнать здесь
- Убедитесь, что input элемент HTML имеет метку
Метки полезны для программ чтения с экрана, чтобы прочитать информацию о поле ввода. См. пример ниже, метка видна только программам чтения с экрана.
<div className="field">
<label className="sr-only" htmlFor="lastname"> lastname </label>
<input
type="text"
placeholder="Last Name"
name="lastname"
required
id="lastname"
/>
</div>
Пример кода и выходные данные
// signup.tsx file
function Signup() {
const Spinner({ width, height,color }) => {
return (
// aria-label used here to add content to describe the element
<div aria-label="loading content" className="spinner">
<div
style={{ width: width, height: height , borderColor: color?"#009985":" #ffffff"}}
className="spinner__animate">
</div>
</div>
);
}
return (
<>
{loading ? (
<Spinner width="100px" height="100px" color />
) : (
<section className="signup">
<h1 className="signup__heading">Sign Up to MOOCs</h1>
<div className="signup__google">
<button
className="signup__google__login-btn"
onClick={() => googlelogin()}
>
Sign in with Google <FcGoogle />
</button>
</div>
<div className="signup__hr-line">
{" "}
<hr />
<h2 className="signup__hr-line__or">OR</h2>
<hr />
</div>
<form
className="signup__form"
onSubmit={signupHandler}
method="POST"
>
<div className="signup__form-namefield">
<div className="field">
// sr-only used for labels, the labels are visible only to screen readers
<label className="sr-only" htmlFor="firstname">
Firstname
</label>
<input
type="text"
placeholder="First Name"
name="firstname"
id="firstname"
required
/>
</div>
<div className="field">
<label className="sr-only" htmlFor="lastname">
lastname
</label>
<input
type="text"
placeholder="Last Name"
name="lastname"
required
id="lastname"
/>
</div>
</div>
<div className="field">
<label className="sr-only" htmlFor="email">
Email
</label>
<input
type="email"
placeholder="Email"
name="email"
id="email"
required
/>
</div>
<div className="field">
<label className="sr-only" htmlFor="password">
Password
</label>
<input
type={toggleVisibility ? "text" : "password"}
placeholder="Password"
minLength={8}
name="password"
id="password"
required
/>
<button
type="button"
// aria-label added to the button tag
aria-label="toggle password"
className="icon-button eye-icon"
onClick={() => setToggleVisibility(!toggleVisibility)}
>
{toggleVisibility ? (
<MdOutlineVisibility />
) : (
<MdOutlineVisibilityOff />
)}
</button>
</div>
<div className="field">
<label className="sr-only" htmlFor="confirmpassword">
Confirm password
</label>
<input
type={toggleVisibility ? "text" : "password"}
placeholder="Confirm Password"
minLength={8}
className={`${checkpassword && "password-check"}`}
required
name="confirmpassword"
id="confirmpassword"
/>
</div>
<div className="field button-field">
<button>
{isLoading ? <Spinner width="30px" height="30px" /> : "Sign Up"}
</button>
</div>
</form>
<div className="signup__bottom">
<div className="signup__bottom-content">
Already have an Account?
<Link to="/login" className="signup__bottom-content__link">
Login
</Link>
</div>
</div>
</section>
)}
</>
);
}
export default Signup;
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
Тестирование на доступность
Нелегко обеспечить стопроцентную доступность в вашем приложении, но есть отличные инструменты для тестирования и помощи в улучшении доступности. Примеры включают:
- Lighthouse — Chrome DevTools, который обеспечивает быструю проверку веб-приложений, измеряет производительность страниц, доступность и многое другое. Он также предлагает предложения по улучшению страницы.
- Проверка доступности Siteimprove
- Аудит доступности домена
- Аналитика доступности для Интернета
Заключение
Я надеюсь, что вы найдете статью полезной. Доступность обучения — это постоянные усилия, и точно так же, как кодирование становится лучше с практикой. Следование рекомендациям, изложенным в этой статье, — отличный шаг на пути к обеспечению специальных возможностей. Есть и другие правила, но это также хорошее место для начала. Не стесняйтесь оставлять комментарии и предложения.
