Usage of ARIA attributes

Analysis
1

Which ARIA roles are most common?

SELECT COUNT(*) AS num, role FROM (
  SELECT page, url, REGEXP_EXTRACT(LOWER(body), r'<[a-z-]+\s(?:[^>]+\s)?role\s*=\s*["\']?([a-z0-9-]+)') AS role
  FROM [httparchive:har.2016_05_01_chrome_requests_bodies]
  WHERE LOWER(body) CONTAINS ' role='
) WHERE role != "null"
GROUP BY role
ORDER BY num DESC

num,role
180547,button
42283,tooltip
36572,banner
33746,alert
33189,navigation
31710,presentation
19925,search
15409,dialog
8519,main
7450,menu
5962,progressbar
5810,checkbox
5190,application
4525,form
4156,bar
3398,complementary
2489,link
2319,listbox
1620,tablist
1429,document
1197,tree
1180,group
1098,status
897,grid
885,contentinfo
706,heading
661,alertdialog
570,textbox
564,menubar
556,article
555,img
523,option
509,menuitem
489,combobox
464,slider
430,tabpanel
421,text
393,tab
315,header
313,listitem
279,region
257,menuitemradio
237,widget-container
188,video
170,toolbar
166,separator
104,gridcell
94,wairole
88,list
87,row
86,dialogue
70,menu-item
48,content
40,yv-tooltip
35,footer
33,nav
32,timer
26,week
25,logo
24,title
23,mpbar1
22,spinbutton
21,radio
21,modal
21,w2dc-tooltip
20,menuitemcheckbox
20,login
19,main-navigation
19,log
19,cylabs
17,filter
17,custom-dropdown
17,radiogroup
14,basic
14,masthead
13,topnavigation
13,complimentary
13,submit
13,note
12,primary
12,morobutton
12,overlay
11,message
11,wrapper
11,weedle-widget
11,select
11,submenus-items-holder
10,cidescription
10,close
9,site-header
9,bookmark
8,image
8,directory
7,rating
7,uploadcare-uploader
7,dialogalert
7,dropdown
7,page
7,off-canvas
7,rowheader
7,marquee
7,treeitem
6,materialitem
6,deferredscript
6,columnheader
6,site
6,navbar
6,main-header
5,pager
5,container
5,pagination
5,navigaton
5,none
5,participant
5,selectbox
5,sidebar
5,newsletter
5,bgfskin
5,main-content
5,top-bar
4,utility
4,rep
4,presentational
4,email
4,mobile
4,autocomplete
4,sidebar-nav
4,facebook-connect
4,body
4,btn
4,iata
4,landingclosebtn
4,company
4,content-box
4,meta
4,user
4,contentwell
4,top
3,home-logo
3,registerusers
3,salebannercontainer
3,toggle
3,ok
3,header-logo
3,global
3,menuuser
3,articles
3,panel-wrap
3,tablink
3,basketitemscount
3,radio-player
3,signup
3,searchform
3,support
3,form-inline
3,switch
3,top-header
3,accessibility
3,trackanalytics
3,777171
3,siteinfo
3,categoryname
3,homepage
3,admin-delete
3,presentationview
3,icon
3,1
3,instructions
3,enter
3,signin
2,blog
2,katj
2,firsttier
2,main-nav
2,navigator
2,sub
2,linkdumps
2,languages
2,show
2,sitemap
2,price
2,content-main
2,spinner
2,production-styles
2,domodal-dialog
2,ahima-header
2,uploadcare-circle-text
2,wrap
2,primary-navigation
2,maincontent
2,navs
2,bc-main
2,category
2,form-tip-
2,math
2,tags
2,carouselwithbottomnav
2,modal-close
2,equalheight-in-normalview-activator
2,popup
2,searchresultchannel
2,home
2,panel-access
2,popover
2,info
2,aside
2,tm
2,multicity-wrap
2,price-container
2,hotel-popup
2,langs
2,more
2,d1
2,threadrating
2,webchat-messages
2,destination
2,live
2,tab-item
2,menu-toggle
2,messages
2,coupon-alert
2,schedulelist
2,currenttab
2,articul
2,module
2,widget
2,navigations
2,collapse
2,aba-top
2,topbar
2,default
2,poprzedni
2,description
2,cart-item-count-element
2,navigaion
2,example
2,branding
2,page-header
2,full-horizontal
2,ignore
2,section
2,recent
2,top-navigation
2,eyebrow
2,pagenavi
1,id
1,pop
1,start
1,datalist
1,navigation-default
1,delayed
1,pesquisar
1,submit-button
1,bottomcontent
1,tab-nhanthuong
1,bener
1,footer-main
1,flash
1,date
1,serch
1,navigation-top
1,menubar-hp
1,check
1,layer
1,open-search
1,rick
1,web-interface
1,photoarticles
1,leftcol
1,download
1,header-search-link
1,botton
1,chat-button
1,appld-install
1,feature
1,nagivation
1,helper
1,scrollable
1,phones-ico
1,sef-search
1,mobile-nav
1,register
1,220
1,tab-content
1,swk-cutover
1,footer-top
1,budgets
1,complentary
1,main2
1,schedule
1,2
1,openbet
1,pagenavigation
1,media
1,sp-bn-topline-bg
1,openvideo
1,media-library-field
1,placeable
1,app
1,index
1,rcloaderrormsg
1,accordion-tablist
1,otomotopl
1,tabs
1,h2
1,dropdown-menu
1,lmenu
1,middle
1,tr
1,layout
1,one
1,min-value
1,structure
1,display
1,topbanner
1,request
1,user-bar
1,copyright-footer
1,active
1,en
1,secondary
1,navigation1
1,navigation2
1,iframe-main
1,block
1,fb
1,related-users
1,page-login
1,autovitro
1,owner
1,jamtip
1,destinations
1,-button
1,navigation-bar
1,preheader
1,ftack-form
1,editor
1,taxon-form
1,section-link
1,serach
1,rowmain
1,back-to-top
1,warning
1,hint
1,hedge-investment
1,menu1
1,101212
1,open
1,firedatepicker
1,9
1,menu-placeholder
1,audience
1,menu-bar
1,action-select
1,mailing
1,testing
1,designers
1,subcribe
1,cui-tooltip
1,navigation-language
1,h
1,smsg
1,sidetool
1,masonry
1,attr
1,s
1,input
1,anonymouse
1,anon
1,userloginbtn
1,ad
1,dropdown-parent
1,timewrap
1,right
1,mainbox
1,documentheader
1,yolink
1,information
1,giant-wrapper
1,head
1,promos
1,alert-contacto
1,secondary-nav
1,list-box
1,installer
1,illustrator
1,catalogue-navigation-link
1,main-stage
1,desktop
1,closebutton
1,product
1,site-main-header
1,from
1,leaderblock
1,mine
1,authtoleavechoose
1,buttons
1,main-feature
1,storefinder
1,intro
1,r7-tooltips-container
1,hide-introduction
1,24225
1,terms
1,him
1,landing
1,quick-info
1,top-container
1,advertisment
1,portal-nav-more
1,nav-item
1,217151
1,headerad
1,intranetlogin
1,acasegridtoolbar
1,free-trial
1,21
1,bookcard
1,monkdev
1,error
1,c3-tablist
1,megamenu
1,labelledby
1,contextual
1,seperator
1,synopsis
1,sim
1,panel-close
1,decoration
1,nprogress-bar
1,track-etablissement-checkout
1,menu-nav
1,ct-tooltip
1,mobbarsearch
1,desktop-tablet-tabs
1,emotion
1,1321414
1,3414
1,query
1,entry
1,contenido
1,side-nav
1,designer
1,showsignform
1,youtube-popup
1,carousel
1,top-featured
1,selectdateinbox
1,success
1,buyer-sku-hit
1,navivation
1,mydavmenuitem
1,background
1,banking-navigation
1,delete
1,home-slide
1,presentantion
1,sub-navigation
1,viewcontroller
1,bannerpic
1,no
1,hp-filter
1,top-nav
1,header-desktop
1,rabatte
1,ui-inplace-dialog
1,profile
1,bannerinfo
1,lighthouse
1,flatdoc
1,must
1,back
1,advancedsearchmap
1,offers
1,item-listing
1,domain
1,105
1,hero-unit
1,hd
1,client
1,a
1,tabslist
1,landingform
1,main-menu
1,fixed
1,sign-up
1,homebanner
1,label
1,menu-vertical
1,navibation
1,slide
1,view
1,user-account
1,site-nav
1,0
1,pushdown
1,explore
1,hide
1,expand
1,clear-input
1,alerts
1,iframe
1,socialbar
1,aringel
1,links
1,shop
1,cartremove
1,navegacao
1,breadcrumb
1,auth-popup
1,search2
1,ui-toggle
1,browse
1,btn-close
1,ui-remove
1,footer-devices
1,listing
1,action
1,content-info
1,ajaxfrom
1,nofollow
1,checkpwdstrength
1,autocomplete-search
1,arama
1,ac
1,amount-of-jobb
1,keyword
1,69614
1,sidemenu
1,mobilenavigation
1,left
1,regist
1,search-box
1,home-listings-count

Which aria-state attributes are most common?

SELECT COUNT(*) AS num, state FROM (
  SELECT page, url, REGEXP_EXTRACT(LOWER(body), r'<[a-z-]+\s(?:[^>]+\s)?(aria-[a-z-]+)') AS state
  FROM [httparchive:har.2016_05_01_chrome_requests_bodies]
  WHERE LOWER(body) CONTAINS ' aria-'
) WHERE state != "null"
GROUP BY state
ORDER BY num DESC

num,state
84288,aria-hidden
48514,aria-label
19910,aria-relevant
12020,aria-labelledby
10680,aria-expanded
8002,aria-live
7855,aria-disabled
7515,aria-haspopup
7352,aria-controls
6135,aria-checked
2375,aria-atomic
2291,aria-invalid
1733,aria-required
1500,aria-describedby
1390,aria-pressed
1201,aria-owns
918,aria-role
757,aria-selected
707,aria-valuemax
617,aria-busy
281,aria-multiselectable
259,aria-valuenow
258,aria-level
249,aria-autocomplete
140,aria-activedescendant
130,aria-setsize
119,aria-valuetext
55,aria-readonly
39,aria-polite
31,aria-labeledby
27,aria-valuetransitiongoal
27,aria-autoclose
25,aria-multiline
18,aria-controlled
14,aria-description
12,aria-ring
11,aria-posinset
11,aria-valuemin
5,aria-hidde
4,aria-print
3,aria-type
3,aria-title
3,aria-hide
3,aria-active-descendant
2,aria-labelled
2,aria-describes
2,aria-presentation
2,aria-labelled-by
2,aria-controles
2,aria-dropeffect
2,aria-expand
2,aria-haspop
2,aria-clicked
2,aria-combobox
2,aria-mask
2,aria-decribedby
2,aria-activedescendent
1,aria-has-popup
1,aria-ctrl
1,aria-bellagio
1,aria-espanded
1,aria-img
1,aria-relavant
1,aria-controle
1,aria-owner
1,aria-hiddentruei
1,aria-collapsible
1,aria-holder
1,aria-orientation
1,aria-grouped
1,aria-flowto
1,aria-cart
1,aria--expanded
1,aria-pwd-id
1,aria-ca-name
1,aria-dolphinuid
1,aria-expande
1,aria-track-click
1,aria-hindden
1,aria-rel
1,aria-content-for
1,aria-expanded-
1,aria-manager
1,aria-ignore
1,aria-ntrols
1,aria-multiselecable
2

Note that WHERE LOWER(body) CONTAINS ' role=' misses a few pages that are supposed to match – if they use other whitespace than U+0020 before the role, or has whitespace between role and =. Omitting this line should get slightly more matches, but I assume running the regex on everything takes a bit longer than checking a substring first.

1 Like
3

I wonder how using count as opposed to limiting these to a simpler tally of 1 per origin shapes our interpretation of this. For example - if you look, there are a lot of non-standard roles/states in here that aren’t the lowest ones on the list at all, but it seems likely that some of those are 1 person misunderstanding and reapplying that N times.

4

It could also be an external script that is referenced by lots of pages, and therefore gets counted several times. I suppose the query could be tweaked to try to count unique instances, but I’m not sure how. :slight_smile:

5

Reran this using the latest data (May 2017). Added a validity check and limited the query to HTML response bodies.

SELECT
  COUNT(*) AS num,
  bodies.role AS role,
  bodies.role IN ("alert", "alertdialog", "application", "article", "banner", "button", "checkbox", "columnheader", "combobox", "command", "complementary", "composite", "contentinfo", "definition", "dialog", "directory", "document", "form", "grid", "gridcell", "group", "heading", "img", "input", "landmark", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "range", "region", "roletype", "row", "rowgroup", "rowheader", "scrollbar", "search", "section", "sectionhead", "select", "separator", "slider", "spinbutton", "status", "structure", "tab", "tablist", "tabpanel", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem", "widget", "window") AS is_valid
FROM (
  SELECT
    page,
    url,
    REGEXP_EXTRACT(LOWER(body), r'<[a-z-]+\s(?:[^>]+\s)?role\s*=\s*["\']?([a-z0-9-]+)') AS role
  FROM
    `httparchive.har.2017_05_01_chrome_requests_bodies`
  WHERE
    STRPOS(LOWER(body), ' role=') != 0) AS bodies JOIN (
  SELECT url FROM `httparchive.runs.2017_04_15_requests` WHERE firstHtml IS TRUE) AS requests
ON requests.url = bodies.url
WHERE
  bodies.role != "null"
GROUP BY
  role
ORDER BY
  num DESC

num	role	is_valid
8986	navigation	TRUE
8599	banner	TRUE
5656	search	TRUE
3955	button	TRUE
3612	dialog	TRUE
2112	main	TRUE
1232	menu	TRUE
961	form	TRUE
874	listbox	TRUE
739	tooltip	TRUE
598	complementary	TRUE
515	tablist	TRUE
405	document	TRUE
370	presentation	TRUE
367	alert	TRUE
291	img	TRUE
233	contentinfo	TRUE
229	menubar	TRUE
161	progressbar	TRUE
144	status	TRUE
125	group	TRUE
117	checkbox	TRUE
110	tabpanel	TRUE
94	textbox	TRUE
90	region	TRUE
84	header	FALSE
71	menuitem	TRUE
68	tab	TRUE
67	separator	TRUE
59	link	TRUE
54	combobox	TRUE
53	article	TRUE
44	application	TRUE
32	heading	TRUE
31	toolbar	TRUE
17	nav	FALSE
14	cylabs	FALSE
13	list	TRUE
12	bar	FALSE
10	logo	FALSE
10	tree	TRUE
10	grid	TRUE
9	image	FALSE
8	alertdialog	TRUE
8	footer	FALSE
8	option	TRUE
7	content	FALSE
7	bookmark	FALSE
6	menu-item	FALSE
6	text	FALSE
5	pagination	FALSE
5	slider	TRUE
4	main-header	FALSE
4	contentwell	FALSE
4	sidebar	FALSE
4	wrapper	FALSE
4	primary	FALSE
4	site	FALSE
4	control	FALSE
4	complimentary	FALSE
4	topnavigation	FALSE
3	login	FALSE
3	dropdown	FALSE
3	spinner	FALSE
3	price-container	FALSE
3	modal	FALSE
3	destination	FALSE
3	top	FALSE
3	treeitem	TRUE
3	filter	FALSE
2	articles	FALSE
2	navs	FALSE
2	eyebrow	FALSE
2	listing	FALSE
2	user	FALSE
2	navigaton	FALSE
2	timer	TRUE
2	none	FALSE
2	hide-introduction	FALSE
2	listitem	TRUE
2	submit	FALSE
2	masthead	FALSE
2	page	FALSE
2	main-navigation	FALSE
2	submenu	FALSE
2	home	FALSE
2	topbar	FALSE
2	directory	TRUE
2	background	FALSE
2	popover	FALSE
2	tablink	FALSE
1	title	FALSE
1	loginfromtopbar	FALSE
1	intro	FALSE
1	close	FALSE
1	browse	FALSE
1	secondary-navigation	FALSE
1	edit-hook	FALSE
1	production-styles	FALSE
1	breadcrumb	FALSE
1	branding	FALSE
1	modal-close	FALSE
1	aba-top	FALSE
1	panel-wrap	FALSE
1	advancedsearchmap	FALSE
1	log	TRUE
1	rechercher	FALSE
1	structure	TRUE
1	pre-post	FALSE
1	marquee	TRUE
1	s	FALSE
1	dialogalert	FALSE
1	currenttab	FALSE
1	snavigation	FALSE
1	objectfit	FALSE
1	bener	FALSE
1	top-featured	FALSE
1	find	FALSE
1	bann	FALSE
1	btnfastloginpanelcall	FALSE
1	autocomplete	FALSE
1	site-header	FALSE
1	nav-item	FALSE
1	tab-content	FALSE
1	basic	FALSE
1	footer-navigation	FALSE
1	navigation-default	FALSE
1	row	TRUE
1	main-nav	FALSE
1	mainnav	FALSE
1	aside	FALSE
1	toggle	FALSE
1	manager	FALSE
1	close-banner	FALSE
1	desktop-tablet-tabs	FALSE
1	nprogress-bar	FALSE
1	note	TRUE
1	drawer-open	FALSE
1	mobbarsearch	FALSE
1	open-search	FALSE
1	helper	FALSE
1	full-horisontal	FALSE
1	copyright-footer	FALSE
1	menubar-hp	FALSE
1	mebu	FALSE
1	expand	FALSE
1	listcountry	FALSE
1	contacts	FALSE
1	navigator	FALSE
1	category	FALSE
1	math	TRUE
1	weedle-widget	FALSE
1	top-nav	FALSE
1	switch	FALSE
1	monkdev	FALSE
1	toggle-sibling-window	FALSE
1	removebox	FALSE
1	profile	FALSE
1	top-bar	FALSE
1	pagenavi	FALSE
1	wairole	FALSE
1	rowheader	TRUE
1	update	FALSE
1	anon	FALSE
1	firsttier	FALSE
1	main-menu	FALSE
1	logica-espacios-publicidad-notitarde	FALSE
1	custom-dropdown	FALSE
1	synopsis	FALSE
1	tpwl-content	FALSE
1	icon	FALSE
1	select	TRUE
1	user-bar	FALSE
1	padigation	FALSE
1	navigation-bar	FALSE
1	gridcell	TRUE
1	keyword	FALSE
1	storefinder	FALSE
1	block	FALSE
1	how-playing	FALSE
1	newsletter	FALSE
1	nopeach	FALSE
1	delayed	FALSE
1	top-navbar	FALSE
1	default	FALSE
1	full-horizontal	FALSE
1	4	FALSE
1	widget	TRUE
1	wrap	FALSE
1	list-box	FALSE
1	social	FALSE
1	affan	FALSE
1	reg	FALSE
1	spinbutton	TRUE
1	columnheader	TRUE
1	teacher	FALSE
1	product	FALSE
1	meta	FALSE
1	2	FALSE
1	toggleclass	FALSE
1	fijinavigation	FALSE
1	m-products	FALSE
1	top-header	FALSE
1	main-wrapper-iamge	FALSE
1	left	FALSE
1	closedialog	FALSE
1	navbar	FALSE
1	ahima-header	FALSE

Valid roles scraped from the WAI-ARIA spec using this script: [...document.querySelectorAll('#role_definitions dt a')].map(e => e.innerText.replace(' (abstract role)', ''))

2 Likes