Разработка доступных графиков

Сергей Кригер

Разработка доступных графиков

SinnerSchrader logo
sergeikriger.com
Есть вакансии

7 632 819 325

www.worldometers.info

Топ 10

www.worldometers.info

Регионы

217 млн
www.iapb.org    www.colourblindawareness.org    www.iapb.org

#1
Это возможно

План

Скрин ридеры

JAWS NVDA VoiceOver Other 46.6% 9.9% 11.7% 31.9%
www.webaim.org/projects/screenreadersurvey7/#primary

График с информацией сколько килограммов яблок было продано.

Минимум яблок (2 кг) было продано 03 июля.

План по продаже 4 кг яблок был выполнен 3 июля и 5 июля.

#2
Знать, о чем график

			const tmpl = "Минимум яблок ({{WEIGHT}} кг) было продано {{DATE}}."
			 
			<svg role="img" alt="Минимум яблок (2 кг) было продано 03 июля.">
				...
			</svg>
		
			const tmpl = "Минимум яблок ({{WEIGHT}} кг) было продано {{DATE}}."
			 
			<svg role="img" aria-label="Данные продаж" aria-describedby="chart-desc">
				<desc id="chart-desc">Минимум яблок (2 кг) было продано 03 июля.</desc>
				...
			</svg>
		

Советы

3 кг яблок, 3 кг бананов, 1 кг апельсинов было продано 01 июля с общей суммой продаж 19 руб. 4 кг яблок, 3 кг. бананов, 5 кг апельсинов было продано 02 июля с общей суммой продаж 38 руб. 2 кг яблок, 2 кг. бананов, 4 кг апельсинов было продано 03 июля с общей суммой продаж 26 руб. 3 кг яблок, 1 кг бананов, 5 кг. апельсинов было продано 04 июля с общей суммой продаж 31 руб. 5 кг яблок, 2 кг бананов, 1 кг апельсинов было продано 05 июля с общей суммой продаж 23 руб.

			<svg class="chart">
				<rect tabindex="0" aria-label="Яблоки, 3 кг продано 1 июля"></rect>
				<rect tabindex="0" aria-label="Яблоки, 4 кг продано 2 июля"></rect>
				<rect tabindex="0" aria-label="Яблоки, 3 кг продано 3 июля"></rect>
			</svg>
		
			<svg class="chart">
				<g class="x axis" aria-hidden="true"></g>
				<g class="y axis" aria-hidden="true"></g>
			    ...
				<rect tabindex="0" aria-label="Яблоки, 3 кг продано 1 июля"></rect>
				<rect tabindex="0" aria-label="Яблоки, 4 кг продано 2 июля"></rect>
				<rect tabindex="0" aria-label="Яблоки, 3 кг продано 3 июля"></rect>
			</svg>
		

Советы

#3
Доступные данные

			<body>
				<svg aria-hidden="true"></svg>
				<table class="visually-hidden"></table>
			</body>
		

visually hidden

			.visually-hidden {
			    position: absolute !important;
			    height: 1px;
			    width: 1px;
			    overflow: hidden;
			    clip: rect(1px, 1px, 1px, 1px);
			}
		
!== 0px
snook.ca
			<body>
				<div class="tabs">
					<div class="tab">
						<svg></svg>
					</div>
					<div class="tab">
						<table></table>
					</div>
				</div>
			</body>
		
Screenshot from ec.europa.eu
Screenshot from ec.europa.eu
Screenshot from ec.europa.eu
			<table>
			    <caption>Bob's data</caption>
				<tr>
				    <th scope="col">Дата</th>
				</tr>
				<tr>
				    <th scope="row">01 июля</th>
				</tr>
			</table>
		
inclusive-components.design/data-tables/
Продавец 1
Дата Яблоки Бананы Апельсины
01 июля 3 3 1
02 июля 4 3 5
03 июля 2 2 4
04 июля 3 1 5
05 июля 5 2 1
Продавец 2
Дата Яблоки Бананы Апельсины
01 июля 3 1 2
02 июля 1 5 4
03 июля 3 4 4
04 июля 2 5 1
05 июля 5 2 3
Общая сумма продаж
Дата Сумма
01 июля 38
02 июля 67
03 июля 59
04 июля 51
05 июля 54
Screenshot from webaim.org

Советы

ещё лучше?

Screenshot from worldbank.org

17 сек.

248

Советы

Резюме

Резюме

Скрин ридер

Доступность

Графики

Спасибо!..

sergeikriger.com bit.ly/holyjs-2018 Presentation QR code.

Credits

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Anton Saputro from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Llisole from www.thenounproject.com is licensed by CC 3.0 BY
Icons made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Pixel perfect from www.flaticon.com is licensed by CC 3.0 BY