Како побољшати приступачност ХТМЛ табеле са означавањем

Веб приступачност се односи на дизајнирање веб апликација на начин да се могу користити са лакоћом код особа са оштећењима вида. Неки од ових корисника се ослањају на читачи екрана прочитати садржај на веб страницама. Читачи екрана интерпретирати код који се налази на страници и прочитати његов садржај кориснику.

је уобичајени ХТМЛ елемент за приказивање података на структуриран начин у веб страницама. Његов дизајн се креће од једноставних до сложених, заједно са заглављима редова, спајањем заглавља итд.

Ако табела није дизајнирана с обзиром на приступачност, читатељима екрана ће бити тешко да смислено преведу податке у сложене табеле за кориснике. Дакле, да бисмо сложене ХТМЛ табеле учинили разумљивијим, за приступачност, морамо осигурати да су заглавља, групе колона, групе редова, итд. јасно дефинисани. Видјет ћемо како је ово постигнуто у маркупу.

Својство атрибута

Чак и за једноставан стол са

маркуп витх сцопе = "цол" помаже помоћној технологији да идентификује да су ћелије које следе у истој колони имена ученика.

Слично томе, ћелије воле

садржи сцопе = "цолгроуп" помаже корисницима да идентификују да су подаци у ћелијама које следе у групи колона које прелазе повезане са одређеном темом.

Онда је ту

маркуп витх сцопе = "ров" који дефинише да ћелије које га прате у истом реду, садрже “граде” информације о том имену ученика.

Ров Гроупс

Сада пређимо на други пример, овај пример ће имати скоро исту табелу као она изнад, осим што ћемо заменити заглавља реда и колона, тако да ћемо моћи да радимо са групама реда.

који јасно дефинише заглавља, можете побољшати његову приступачност помоћу Обим атрибут и не смију се препустити било каквој конфузији која може настати из сличних типова података у ћелијама.

  име запосленог  Емплоиее Цоде  Пројецт Цоде  Означавање запосленика  
  Н.Н. лице  32456  456789  Директор  
  Мириам Лутхер  78902  456789  Заменик директора

Шта ради атрибут опсега? Према В3Ц:

Другим речима, то нам помаже да повежемо ћелије са одговарајућим ћелијама заглавља.

Имајте на уму да у горњем примеру можете да се пребаците

за

. Докле год је Обим има вредност цол, он ће се тумачити као заглавље одговарајуће колоне.

Тхе Обим атрибут може имати било коју од ове четири вредности; цол, ред, ровгроуп, цолгроуп да се односи на заглавље колоне, заглавље реда, заглавље колоне и групу заглавља редова.

Цомплек Таблес

Сада пређимо на сложенију табелу.

Изнад је табела која наводи ученике у разреду и њихове оцјене из практичне и теоријске основе за три предмета.

Ево ХТМЛ кода за њега. Табела је коришћена ровспан и цолспан за креирање спојених заглавља за ћелије података.

  Име студента  Биологи  Цхемистри  Пхисицс  
  Практично  Теорија  Практично  Теорија  Практично  Теорија  
  Н.Н. лице  А  А+  Б  А  А  А-  
  Мириам Лутхер  А  А  Ц  Ц+  А  А-

У горњој табели, свака ћелија података, која је свака од ћелија табеле приказује оцену, повезано је са три информације:

Којим студентима припада овај разред?
Који предмет припада овом разреду?
Да ли је овај разред за практичну или теоријску секцију?

Ове три информације су дефинисане у три различите врсте ћелија заглавља структурно и визуелно:

Име студента
Име предмета
Практична или теоријска

Хајде да дефинишемо исто за приступачност.

      Име студента  Биологи  Цхемистри  Пхисицс  
  Практично  Теорија  Практично  Теорија  Практично  Теорија  
  Н.Н. лице  А  А+  Б  А  А  А-  
  Мириам Лутхер  А  А  Ц  Ц+  А  А-

У горе наведеној ознаци смо додали Обим на ћелије које садрже информације о ћелијама података.

Цолумн Гроуп

Ћелије биологије, хемије и физике треба да буду повезане са групом од две колоне свака (теорија и пракса). Само додавање цолспан = "2" не креира групе колона, само указује да одређена ћелија заузима простор од две ћелије.

Да бисте креирали групу колона морате користити цолгроуп и затим додајте спан атрибут који показује колико ступаца садржи група ступаца.

Тхе

Име студента

Биологи

Н.Н. лице

Субјецт		Н.Н. лице	Мириам Лутхер
Биологи	Практично	А	А
Биологи	Теорија	А+	А
Цхемистри	Практично	Б	Ц
Цхемистри	Теорија	А	Ц+
Пхисицс	Практично	А	А
Пхисицс	Теорија	А-	А-

Сада када имамо узорак да радимо са почетком креираћемо групе реда као што смо то урадили за групе колона у претходном примеру.

Међутим, групе реда не могу се креирати помоћу ознаке као цолгроуп јер нема ровгроуп елемент.

ХТМЛ редови се генерално групишу коришћењем , и елементи. Један ХТМЛ

елемент може имати један , један и више . Користићемо више тбоди у нашој табели за креирање група редова и додавање одговарајућег опсега ћелијама заглавља.

Субјецт		Н.Н. лице	Мириам Лутхер
Биологи	Практично	А	А
Биологи	Теорија	А+	А
Цхемистри	Практично	Б	Ц
Цхемистри	Теорија	А	Ц+
Пхисицс	Практично	А	А
Пхисицс	Теорија	А-	А-

Додали смо редове “Практично” и “Теорија” у сваком тбоди креирање група редова са два реда у свакој. Такође смо додали сцопе = "ровгроуп" ћелијама које садрже информације о заглављу о тим два реда (који је предмет у којем су оцене у овом случају).

Сада прочитајте: Једнака висина колоне са ЦСС-ом