diff --git a/lightrag_webui/src/components/graph/PropertiesView.tsx b/lightrag_webui/src/components/graph/PropertiesView.tsx
index 627049ea..3aa248de 100644
--- a/lightrag_webui/src/components/graph/PropertiesView.tsx
+++ b/lightrag_webui/src/components/graph/PropertiesView.tsx
@@ -184,9 +184,11 @@ const PropertyRow = ({
     return translation === translationKey ? name : translation
   }
 
+  // Since Text component uses a label internally, we'll use a span here instead of a label
+  // to avoid nesting labels which is not recommended for accessibility
   return (
     <div className="flex items-center gap-2">
-      <label className="text-primary/60 tracking-wide whitespace-nowrap">{getPropertyNameTranslation(name)}</label>:
+      <span className="text-primary/60 tracking-wide whitespace-nowrap">{getPropertyNameTranslation(name)}</span>:
       <Text
         className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis"
         tooltipClassName="max-w-80"
@@ -213,7 +215,7 @@ const NodePropertiesView = ({ node }: { node: NodeType }) => {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex justify-between items-center">
-        <label className="text-md pl-1 font-bold tracking-wide text-blue-700">{t('graphPanel.propertiesView.node.title')}</label>
+        <h3 className="text-md pl-1 font-bold tracking-wide text-blue-700">{t('graphPanel.propertiesView.node.title')}</h3>
         <div className="flex gap-3">
           <Button
             size="icon"
@@ -246,7 +248,7 @@ const NodePropertiesView = ({ node }: { node: NodeType }) => {
         />
         <PropertyRow name={t('graphPanel.propertiesView.node.degree')} value={node.degree} />
       </div>
-      <label className="text-md pl-1 font-bold tracking-wide text-amber-700">{t('graphPanel.propertiesView.node.properties')}</label>
+      <h3 className="text-md pl-1 font-bold tracking-wide text-amber-700">{t('graphPanel.propertiesView.node.properties')}</h3>
       <div className="bg-primary/5 max-h-96 overflow-auto rounded p-1">
         {Object.keys(node.properties)
           .sort()
@@ -256,9 +258,9 @@ const NodePropertiesView = ({ node }: { node: NodeType }) => {
       </div>
       {node.relationships.length > 0 && (
         <>
-          <label className="text-md pl-1 font-bold tracking-wide text-emerald-700">
+          <h3 className="text-md pl-1 font-bold tracking-wide text-emerald-700">
             {t('graphPanel.propertiesView.node.relationships')}
-          </label>
+          </h3>
           <div className="bg-primary/5 max-h-96 overflow-auto rounded p-1">
             {node.relationships.map(({ type, id, label }) => {
               return (
@@ -283,7 +285,7 @@ const EdgePropertiesView = ({ edge }: { edge: EdgeType }) => {
   const { t } = useTranslation()
   return (
     <div className="flex flex-col gap-2">
-      <label className="text-md pl-1 font-bold tracking-wide text-violet-700">{t('graphPanel.propertiesView.edge.title')}</label>
+      <h3 className="text-md pl-1 font-bold tracking-wide text-violet-700">{t('graphPanel.propertiesView.edge.title')}</h3>
       <div className="bg-primary/5 max-h-96 overflow-auto rounded p-1">
         <PropertyRow name={t('graphPanel.propertiesView.edge.id')} value={edge.id} />
         {edge.type && <PropertyRow name={t('graphPanel.propertiesView.edge.type')} value={edge.type} />}
@@ -302,7 +304,7 @@ const EdgePropertiesView = ({ edge }: { edge: EdgeType }) => {
           }}
         />
       </div>
-      <label className="text-md pl-1 font-bold tracking-wide text-amber-700">{t('graphPanel.propertiesView.edge.properties')}</label>
+      <h3 className="text-md pl-1 font-bold tracking-wide text-amber-700">{t('graphPanel.propertiesView.edge.properties')}</h3>
       <div className="bg-primary/5 max-h-96 overflow-auto rounded p-1">
         {Object.keys(edge.properties)
           .sort()
diff --git a/lightrag_webui/src/components/graph/Settings.tsx b/lightrag_webui/src/components/graph/Settings.tsx
index af585b83..ac8798a4 100644
--- a/lightrag_webui/src/components/graph/Settings.tsx
+++ b/lightrag_webui/src/components/graph/Settings.tsx
@@ -23,11 +23,14 @@ const LabeledCheckBox = ({
   onCheckedChange: () => void
   label: string
 }) => {
+  // Create unique ID using the label text converted to lowercase with spaces removed
+  const id = `checkbox-${label.toLowerCase().replace(/\s+/g, '-')}`;
+  
   return (
     <div className="flex items-center gap-2">
-      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />
+      <Checkbox id={id} checked={checked} onCheckedChange={onCheckedChange} />
       <label
-        htmlFor="terms"
+        htmlFor={id}
         className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         {label}
@@ -56,6 +59,8 @@ const LabeledNumberInput = ({
 }) => {
   const { t } = useTranslation();
   const [currentValue, setCurrentValue] = useState<number | null>(value)
+  // Create unique ID using the label text converted to lowercase with spaces removed
+  const id = `input-${label.toLowerCase().replace(/\s+/g, '-')}`;
 
   const onValueChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -94,13 +99,14 @@ const LabeledNumberInput = ({
   return (
     <div className="flex flex-col gap-2">
       <label
-        htmlFor="terms"
+        htmlFor={id}
         className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         {label}
       </label>
       <div className="flex items-center gap-1">
         <Input
+          id={id}
           type="number"
           value={currentValue === null ? '' : currentValue}
           onChange={onValueChange}
@@ -295,11 +301,12 @@ export default function Settings() {
             />
 
             <div className="flex flex-col gap-2">
-              <label className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+              <label htmlFor="edge-size-min" className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                 {t('graphPanel.sideBar.settings.edgeSizeRange')}
               </label>
               <div className="flex items-center gap-2">
                 <Input
+                  id="edge-size-min"
                   type="number"
                   value={minEdgeSize}
                   onChange={(e) => {
@@ -315,6 +322,7 @@ export default function Settings() {
                 <span>-</span>
                 <div className="flex items-center gap-1">
                   <Input
+                    id="edge-size-max"
                     type="number"
                     value={maxEdgeSize}
                     onChange={(e) => {
diff --git a/lightrag_webui/src/components/retrieval/QuerySettings.tsx b/lightrag_webui/src/components/retrieval/QuerySettings.tsx
index 7be587df..9fca1782 100644
--- a/lightrag_webui/src/components/retrieval/QuerySettings.tsx
+++ b/lightrag_webui/src/components/retrieval/QuerySettings.tsx
@@ -93,14 +93,19 @@ export default function QuerySettings() {
                 tooltip={t('retrievePanel.querySettings.topKTooltip')}
                 side="left"
               />
-              <NumberInput
-                id="top_k"
-                stepper={1}
-                value={querySettings.top_k}
-                onValueChange={(v) => handleChange('top_k', v)}
-                min={1}
-                placeholder={t('retrievePanel.querySettings.topKPlaceholder')}
-              />
+              <div>
+                <label htmlFor="top_k" className="sr-only">
+                  {t('retrievePanel.querySettings.topK')}
+                </label>
+                <NumberInput
+                  id="top_k"
+                  stepper={1}
+                  value={querySettings.top_k}
+                  onValueChange={(v) => handleChange('top_k', v)}
+                  min={1}
+                  placeholder={t('retrievePanel.querySettings.topKPlaceholder')}
+                />
+              </div>
             </>
 
             {/* Max Tokens */}
@@ -112,14 +117,19 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.maxTokensTextUnitTooltip')}
                   side="left"
                 />
-                <NumberInput
-                  id="max_token_for_text_unit"
-                  stepper={500}
-                  value={querySettings.max_token_for_text_unit}
-                  onValueChange={(v) => handleChange('max_token_for_text_unit', v)}
-                  min={1}
-                  placeholder={t('retrievePanel.querySettings.maxTokensTextUnit')}
-                />
+                <div>
+                  <label htmlFor="max_token_for_text_unit" className="sr-only">
+                    {t('retrievePanel.querySettings.maxTokensTextUnit')}
+                  </label>
+                  <NumberInput
+                    id="max_token_for_text_unit"
+                    stepper={500}
+                    value={querySettings.max_token_for_text_unit}
+                    onValueChange={(v) => handleChange('max_token_for_text_unit', v)}
+                    min={1}
+                    placeholder={t('retrievePanel.querySettings.maxTokensTextUnit')}
+                  />
+                </div>
               </>
 
               <>
@@ -128,14 +138,19 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.maxTokensGlobalContextTooltip')}
                   side="left"
                 />
-                <NumberInput
-                  id="max_token_for_global_context"
-                  stepper={500}
-                  value={querySettings.max_token_for_global_context}
-                  onValueChange={(v) => handleChange('max_token_for_global_context', v)}
-                  min={1}
-                  placeholder={t('retrievePanel.querySettings.maxTokensGlobalContext')}
-                />
+                <div>
+                  <label htmlFor="max_token_for_global_context" className="sr-only">
+                    {t('retrievePanel.querySettings.maxTokensGlobalContext')}
+                  </label>
+                  <NumberInput
+                    id="max_token_for_global_context"
+                    stepper={500}
+                    value={querySettings.max_token_for_global_context}
+                    onValueChange={(v) => handleChange('max_token_for_global_context', v)}
+                    min={1}
+                    placeholder={t('retrievePanel.querySettings.maxTokensGlobalContext')}
+                  />
+                </div>
               </>
 
               <>
@@ -145,14 +160,19 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.maxTokensLocalContextTooltip')}
                   side="left"
                 />
-                <NumberInput
-                  id="max_token_for_local_context"
-                  stepper={500}
-                  value={querySettings.max_token_for_local_context}
-                  onValueChange={(v) => handleChange('max_token_for_local_context', v)}
-                  min={1}
-                  placeholder={t('retrievePanel.querySettings.maxTokensLocalContext')}
-                />
+                <div>
+                  <label htmlFor="max_token_for_local_context" className="sr-only">
+                    {t('retrievePanel.querySettings.maxTokensLocalContext')}
+                  </label>
+                  <NumberInput
+                    id="max_token_for_local_context"
+                    stepper={500}
+                    value={querySettings.max_token_for_local_context}
+                    onValueChange={(v) => handleChange('max_token_for_local_context', v)}
+                    min={1}
+                    placeholder={t('retrievePanel.querySettings.maxTokensLocalContext')}
+                  />
+                </div>
               </>
             </>
 
@@ -164,16 +184,21 @@ export default function QuerySettings() {
                 tooltip={t('retrievePanel.querySettings.historyTurnsTooltip')}
                 side="left"
               />
-              <NumberInput
-                className="!border-input"
-                id="history_turns"
-                stepper={1}
-                type="text"
-                value={querySettings.history_turns}
-                onValueChange={(v) => handleChange('history_turns', v)}
-                min={0}
-                placeholder={t('retrievePanel.querySettings.historyTurnsPlaceholder')}
-              />
+              <div>
+                <label htmlFor="history_turns" className="sr-only">
+                  {t('retrievePanel.querySettings.historyTurns')}
+                </label>
+                <NumberInput
+                  className="!border-input"
+                  id="history_turns"
+                  stepper={1}
+                  type="text"
+                  value={querySettings.history_turns}
+                  onValueChange={(v) => handleChange('history_turns', v)}
+                  min={0}
+                  placeholder={t('retrievePanel.querySettings.historyTurnsPlaceholder')}
+                />
+              </div>
             </>
 
             {/* Keywords */}
@@ -185,19 +210,24 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.hlKeywordsTooltip')}
                   side="left"
                 />
-                <Input
-                  id="hl_keywords"
-                  type="text"
-                  value={querySettings.hl_keywords?.join(', ')}
-                  onChange={(e) => {
-                    const keywords = e.target.value
-                      .split(',')
-                      .map((k) => k.trim())
-                      .filter((k) => k !== '')
-                    handleChange('hl_keywords', keywords)
-                  }}
-                  placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
-                />
+                <div>
+                  <label htmlFor="hl_keywords" className="sr-only">
+                    {t('retrievePanel.querySettings.hlKeywords')}
+                  </label>
+                  <Input
+                    id="hl_keywords"
+                    type="text"
+                    value={querySettings.hl_keywords?.join(', ')}
+                    onChange={(e) => {
+                      const keywords = e.target.value
+                        .split(',')
+                        .map((k) => k.trim())
+                        .filter((k) => k !== '')
+                      handleChange('hl_keywords', keywords)
+                    }}
+                    placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
+                  />
+                </div>
               </>
 
               <>
@@ -207,32 +237,38 @@ export default function QuerySettings() {
                   tooltip={t('retrievePanel.querySettings.llKeywordsTooltip')}
                   side="left"
                 />
-                <Input
-                  id="ll_keywords"
-                  type="text"
-                  value={querySettings.ll_keywords?.join(', ')}
-                  onChange={(e) => {
-                    const keywords = e.target.value
-                      .split(',')
-                      .map((k) => k.trim())
-                      .filter((k) => k !== '')
-                    handleChange('ll_keywords', keywords)
-                  }}
-                  placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
-                />
+                <div>
+                  <label htmlFor="ll_keywords" className="sr-only">
+                    {t('retrievePanel.querySettings.llKeywords')}
+                  </label>
+                  <Input
+                    id="ll_keywords"
+                    type="text"
+                    value={querySettings.ll_keywords?.join(', ')}
+                    onChange={(e) => {
+                      const keywords = e.target.value
+                        .split(',')
+                        .map((k) => k.trim())
+                        .filter((k) => k !== '')
+                      handleChange('ll_keywords', keywords)
+                    }}
+                    placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
+                  />
+                </div>
               </>
             </>
 
             {/* Toggle Options */}
             <>
               <div className="flex items-center gap-2">
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.onlyNeedContext')}
-                  tooltip={t('retrievePanel.querySettings.onlyNeedContextTooltip')}
-                  side="left"
-                />
-                <div className="grow" />
+                <label htmlFor="only_need_context" className="flex-1">
+                  <Text
+                    className="ml-1"
+                    text={t('retrievePanel.querySettings.onlyNeedContext')}
+                    tooltip={t('retrievePanel.querySettings.onlyNeedContextTooltip')}
+                    side="left"
+                  />
+                </label>
                 <Checkbox
                   className="mr-1 cursor-pointer"
                   id="only_need_context"
@@ -242,13 +278,14 @@ export default function QuerySettings() {
               </div>
 
               <div className="flex items-center gap-2">
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.onlyNeedPrompt')}
-                  tooltip={t('retrievePanel.querySettings.onlyNeedPromptTooltip')}
-                  side="left"
-                />
-                <div className="grow" />
+                <label htmlFor="only_need_prompt" className="flex-1">
+                  <Text
+                    className="ml-1"
+                    text={t('retrievePanel.querySettings.onlyNeedPrompt')}
+                    tooltip={t('retrievePanel.querySettings.onlyNeedPromptTooltip')}
+                    side="left"
+                  />
+                </label>
                 <Checkbox
                   className="mr-1 cursor-pointer"
                   id="only_need_prompt"
@@ -258,13 +295,14 @@ export default function QuerySettings() {
               </div>
 
               <div className="flex items-center gap-2">
-                <Text
-                  className="ml-1"
-                  text={t('retrievePanel.querySettings.streamResponse')}
-                  tooltip={t('retrievePanel.querySettings.streamResponseTooltip')}
-                  side="left"
-                />
-                <div className="grow" />
+                <label htmlFor="stream" className="flex-1">
+                  <Text
+                    className="ml-1"
+                    text={t('retrievePanel.querySettings.streamResponse')}
+                    tooltip={t('retrievePanel.querySettings.streamResponseTooltip')}
+                    side="left"
+                  />
+                </label>
                 <Checkbox
                   className="mr-1 cursor-pointer"
                   id="stream"
diff --git a/lightrag_webui/src/features/DocumentManager.tsx b/lightrag_webui/src/features/DocumentManager.tsx
index ef2db54f..8b83661e 100644
--- a/lightrag_webui/src/features/DocumentManager.tsx
+++ b/lightrag_webui/src/features/DocumentManager.tsx
@@ -507,8 +507,14 @@ export default function DocumentManager() {
                 </div>
               </div>
               <div className="flex items-center gap-2">
-                <span className="text-sm text-gray-500">{t('documentPanel.documentManager.fileNameLabel')}</span>
+                <label 
+                  htmlFor="toggle-filename-btn" 
+                  className="text-sm text-gray-500"
+                >
+                  {t('documentPanel.documentManager.fileNameLabel')}
+                </label>
                 <Button
+                  id="toggle-filename-btn"
                   variant="outline"
                   size="sm"
                   onClick={() => setShowFileName(!showFileName)}
diff --git a/lightrag_webui/src/features/RetrievalTesting.tsx b/lightrag_webui/src/features/RetrievalTesting.tsx
index 6b388ea1..1c3fb2db 100644
--- a/lightrag_webui/src/features/RetrievalTesting.tsx
+++ b/lightrag_webui/src/features/RetrievalTesting.tsx
@@ -147,13 +147,19 @@ export default function RetrievalTesting() {
             <EraserIcon />
             {t('retrievePanel.retrieval.clear')}
           </Button>
-          <Input
-            className="flex-1"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            placeholder={t('retrievePanel.retrieval.placeholder')}
-            disabled={isLoading}
-          />
+          <div className="flex-1 relative">
+            <label htmlFor="query-input" className="sr-only">
+              {t('retrievePanel.retrieval.placeholder')}
+            </label>
+            <Input
+              id="query-input"
+              className="w-full"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder={t('retrievePanel.retrieval.placeholder')}
+              disabled={isLoading}
+            />
+          </div>
           <Button type="submit" variant="default" disabled={isLoading} size="sm">
             <SendIcon />
             {t('retrievePanel.retrieval.send')}